<template>
  <div class="editableTable-container">
    <div class="table-title" v-if="propTitle">
      <slot name="title">
        {{ propTitle }}
      </slot>
    </div>
    <v-data-table
      disable-sort
      fixed-header
      v-on="$listeners"
      v-bind="$attrs"
      class="table"
      :class="[
        propRoundedHeader ? 'rounded-header' : '',
        propRounded ? 'rounded' : '',
      ]"
    >
      <template v-for="(index, name) in $scopedSlots" #[name]="slotsData">
        <slot :name="name" v-bind="slotsData" />
      </template>
      <template #[`header.prepend`]>
        <slot name="item.prepend">
          <v-icon color="#79839B" class="icon pointer">mdi-plus-circle</v-icon>
        </slot>
      </template>
      <template #[`item.prepend`]>
        <slot name="item.prepend">
          <v-icon color="#79839B" class="icon pointer">mdi-minus-circle</v-icon>
        </slot>
      </template>
    </v-data-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  props: {
    showHeaderAction: {
      type: Boolean,
      default: true,
    },
    roundedHeader: {
      type: Boolean,
      default: false,
    },
    rounded: {
      type: Boolean,
      default: true,
    },
    title: String,
  },
})
export default class Table extends Vue {
  // @Prop(Boolean) readonly showHeaderAction!: boolean;
  get propShowHeaderAction() {
    return this.$props.showHeaderAction;
  }

  get propTitle() {
    return this.$props.title;
  }

  get propRounded() {
    return this.$props.rounded;
  }

  get propRoundedHeader() {
    return this.$props.roundedHeader;
  }
}
</script>

<style lang="scss" scoped>
@import "./EditableTable.scss";
</style>
